<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <h2>人员列表3</h2>
    <input type="text" placeholder="输入用户名关键字" v-model="keyword">
    <button @click="sortType=1">升序</button>
    <button @click="sortType=2">降序</button>
    <button @click="sortType=0">原序</button>
    <ul>
        <li v-for=" (p,index) in filterPersons" :key="p.id">
            {{p.name}}--{{p.age}}--{{p.gender}}
        </li>
        
    </ul>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",

      data: {
        sortType:0,
        keyword:'',
        persons: [ // 总人员数组
          { id: '001', name: '马冬梅', age: 21, gender: '女' },
          { id: '002', name: '周冬雨', age: 19, gender: '女' },
          { id: '003', name: '周杰伦', age: 20, gender: '男' },
          { id: '004', name: '帅邓伦', age: 22, gender: '男' },
        ]
      },
      computed:{
        filterPersons(){
        const { sortType,keyword,persons } = this

        const arr = persons.filter(p=>p.name.includes(keyword))

        if(sortType != 0){
          arr.sort((a,b)=>{
            if(sortType == 1){
              return a.age-b.age
            }else{
              return b.age-a.age
            }
          })
        }
        return arr
        }
      }
    })
  </script>
</body>
</html>